<template>
	<view class="content">
		<image class="logo" src="/static/logo-spsi.png"></image>
        <view style="padding: 10px 20px 50px 20px; display:flex; min-height: 90px ">
			<text class="title">{{title}}</text>
		</view>
        
        <view style="width: 100%; padding-top: 50px;">
            <form>
                <view style="display: flex; flex-direction: row; margin-top: 6px; padding: 2px 8px">
                    <view class="title" style="padding-top: 10px; width: 40px">
                        <uni-icons type="person-filled" size="28" style="margin-right: 0px; color: rgb(67 170 243)"></uni-icons>
                    </view>
                    <view style="flex: 1" class="login-form">
                        <input style="font-size: 15px; border: 1px solid #eee; height: 36px; padding: 5px" 
                            placeholder-style="color:#ccc" v-model="username" placeholder="请输入用户名" />
                    </view>
                </view>
                <view style="display: flex; flex-direction: row; margin-top: 2px; padding: 2px 8px">
                    <view class="title" style="padding-top: 10px; width: 40px">
                        <uni-icons type="locked-filled" size="28" style="margin-right: 0px; color: rgb(67 170 243)"></uni-icons>
                    </view>
                    <view style="flex: 1" class="login-form">
                        <input style="font-size: 15px; border: 1px solid #eee; height: 36px; padding: 5px" 
                            placeholder-style="color:#ccc" type="password" v-model="password" placeholder="请输入密码" />
                    </view>
                </view>

                <view class="uni-btn-v" style="margin-top: 20px">
                    <button form-type="submit" type="primary" @click="login">登录</button>
                </view>
                <view>
                    <text style="font-size: 10px; color: #aaa; padding-left: 10px" @click="forgetPassword">忘记密码</text>
                </view>
                
            </form>
            <div class="blog-footer" style="position: fixed; bottom: 1px; font-size: 16px; width: 100%; text-align: center;">
                <div style="margin-bottom: 15px">
                  <a href="https://beian.miit.gov.cn/">蜀ICP备2020034887号-3</a>
                </div>
              </div>
        </view>
	</view>
</template>

<script>
    import Utils from "@/js/utils";

	export default {
		data() {
			return {
				title: '云港科技高级日志管理系统',
                username: "",
                password: "",  
			}
		},
		onLoad() {
            Utils.getCache('token').then(d => {
                if (d === null) return;
                uni.switchTab({
                    url: '/pages/index/index'
                });
            }).catch(d => {
                
            })
		},
		methods: {
            login() {
                if (this.username === "" || this.password === "") {
                    return uni.showModal({
						title: '提示',
						content: '请输入用户名和密码！',
                        showCancel: false,
					});
                }
                Utils.ajax("/login", { username: this.username, password: this.password }).then(res => {
					Utils.setCacheSync('token', res.tk);
                    Utils.setCacheSync('level', res.lv);
                    Utils.setCacheSync('username', this.username);
                    Utils.setCacheSync('orgId', res.orgId);
                    Utils.setCacheSync('orgName', res.orgName);
                    Utils.setCacheSync('realName', res.realName);
					if (Utils.getCacheSync('token')) {
                        uni.switchTab({
                            url: "/pages/index/index"
                        });
					};
				});
            },
            forgetPassword() {
                uni.showModal({
                    title: '忘记密码',
                    content: "暂未开放自助找回密码功能，请联系管理员！",
                    showCancel: false,
                    success: res => {
                    }
                });
            },
            onNavigationBarButtonTap(e) {
                uni.showModal({
                    title: '关于',
                    content: "本系统为项目管理与工作记录结合的日志系统，由云港科技公司荣誉出品，使用问题请参考用户手册。",
                    showCancel: false,
                    success: res => {
                    }
                });
            }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
    .login-form input{color: #0AA!important}
	.logo {
		height: 40px;
		width: 120px;
		margin: 30px auto 6px auto;
	}

	.title {
		font-size: 18px;
		color: #f26005;
        font-weight: 400;
	}

</style>
